$theme: (
   dark: (bg: #000,
      color: "#fff"
   ),
   light: (bg: #fff,
      color: "#000"
   )
);

$currentTheme: '';

@mixin useTheme() {
   @each $key, $value in $theme {
      $currentTheme: $key !global;

      html[data-theme="#{$key}"] & {
         @content;
      }
   }
}

@function getValue($key) {
   $themeItem: map-get($theme, $currentTheme);
   @return map-get($themeItem, $key);
}


@mixin useThemePlus() {
   @include useTheme() {
      background-color: getValue(bg);
      color: getValue(color);
      @content;
   }
}


.box {
   @include useThemePlus() {
      border: 1px solid getValue(color);
   }
}